/**
 * Created by Administrator on 2018-08-13.
 * 保障排行分析
 */

define(function (require,exports,module) {
    var sTpl = require("./secRanking.html");
    require("./secRanking.css");
    require("../../../lib/echarts.min.js");
    var VueComponent = Vue.extend({
        template: sTpl,
        data:function () {
            return {
                secTops:[
                    {
                        name:'地服',
                        useRatio:'98%'

                    },
                    {
                        name:'运控',
                        useRatio:'95%'

                    },
                    {
                        name:'食品',
                        useRatio:'90%'
                    }
                ]

            }
        },
        methods: {
            tabClick:function(a){
                if(a.paneName==='1'){
                    this.$nextTick(function () {
                        this.secProjectNodesrM();
                        this.secProjectNodesrOM();
                        this.sroOnTime();
                    }.bind(this));
                }
            },
            /******************************************昨日保障排行****************************************/
            /*地服项目各环节准点率排行*/
            secProjectNodesr: function () {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('secProjectNodesr'))
                // 绘制图表
                myChart.setOption({
                    "tooltip": {
                        "trigger": "axis",
                        "axisPointer": {
                            "type": "line",
                            "lineStyle": {
                                "color": "#0177d4"
                            }
                        },
                        'formatter': '<div class="dot-border"> <div class ="dot"></div></div>  {a0}:{c0}% </br><div class="dot-border1"> <div class ="dot1"></div></div>  {a1}:{c1}% </br>'

                    },
                    "color": [
                        "#00c1fd",
                        "#fd8e0e"
                    ],
                    "legend": {
                        "align": "left",
                        "right": 16,
                        "top": 16,
                        "itemWidth": 10,
                        "itemHeight": 10,
                        "itemGap": 20,
                        "data": [
                            "延误",
                            "准点",
                        ],
                        textStyle:{
                            color:'#00FFFF'
                        }
                    },
                    "grid": {
                        "left": '5%',
                        "right": '15%',
                        "bottom": '3%',
                        "top": '15%',
                        "containLabel": true,

                    },
                    "xAxis": {
                        name:'保障名称',
                        nameTextStyle:{
                            color:'#00FFFF',
                            fontSize:'12',
                        },
                        "type": "category",
                        "data": [
                            {
                                "value": "装卸开始",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            },
                            {
                                "value": "下机开始",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            },
                            {
                                "value": "加油开始",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            },
                            {
                                "value": "下机结束",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            },
                            {
                                "value": "清洁开始",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            },
                            {
                                "value": "加油结束",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            },
                            {
                                "value": "开始登机",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            }
                            ,
                            {
                                "value": "值机关闭",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            },
                            {
                                "value": "清洁结束",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            },
                            {
                                "value": "舱单结束",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            },
                            {
                                "value": "登机结束",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            },
                            {
                                "value": "装卸结束",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            }
                        ],
                        axisLabel: {
                            formatter: function(value) {
                                var ret = ""; //拼接加\n返回的类目项
                                var maxLength = 1; //每项显示文字个数
                                var valLength = value.length; //X轴类目项的文字个数
                                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                                if (rowN > 1) //如果类目项的文字大于3,
                                {
                                    for (var i = 0; i < rowN; i++) {
                                        var temp = ""; //每次截取的字符串
                                        var start = i * maxLength; //开始截取的位置
                                        var end = start + maxLength; //结束截取的位置
                                        //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                                        temp = value.substring(start, end) + "\n";
                                        ret += temp; //凭借最终的字符串
                                    }
                                    return ret;
                                } else {
                                    return value;
                                }
                            },
                            interval: 0,
                            fontSize: 12,
                            fontWeight: 100,
                            textStyle: {
                                color: '#00FFFF',

                            }
                        },
                        "axisTick": {
                            "show": false
                        },
                        "axisLine": {
                            "gridIndex": 10,
                            "lineStyle": {
                                color: '#0177d4'
                            }
                        }
                    },
                    "yAxis": {
                        name :'(%)',
                        nameTextStyle:{
                            color:'#00FFFF',
                            fontSize:'12',
                        },
                        "gridIndex": 0,
                        "type": "value",
                        "axisLabel": {
                            "color": "#00FFFF",
                            "fontSize":'12',
                        },
                        "axisLine": {
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },

                    },
                    "series": [
                        {
                            "name": "准点",
                            "type": "bar",
                            "stack": "状况",
                            "barWidth": 10,
                            "data": [90, 85, 80, 100, 90, 95, 100,90,80,90,100,95
                            ]
                        },
                        {
                            "name": "延误",
                            "type": "bar",
                            "stack": "状况",
                            "barWidth": 10,
                            "data": [10, 15, 20, 0, 10, 5, 0,10,20,10,0,5
                            ]}]

                });
            },
            /*其他项目各环节准点率排行*/
            secProjectNodesrO: function () {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('secProjectNodesrO'))
                // 绘制图表
                myChart.setOption({
                    "tooltip": {
                        "trigger": "axis",
                        "axisPointer": {
                            "type": "line",
                            "lineStyle": {
                                "color": "#0177d4"
                            }
                        },
                        'formatter': '<div class="dot-border"> <div class ="dot"></div></div>  {a0}:{c0}% </br><div class="dot-border1"> <div class ="dot1"></div></div>  {a1}:{c1}% </br>'

                    },
                    "color": [
                        "#00c1fd",
                        "#fd8e0e"
                    ],
                    "legend": {
                        "align": "left",
                        "right": 16,
                        "top": 16,
                        "itemWidth": 10,
                        "itemHeight": 10,
                        "itemGap": 20,
                        "data": [
                            "延误",
                            "准点",
                        ],
                        textStyle:{
                            color:'#00FFFF'
                        }
                    },
                    "grid": {
                        "left": '5%',
                        "right": '15%',
                        "bottom": '3%',
                        "top": '15%',
                        "containLabel": true,

                    },
                    "xAxis": {
                        name:'保障名称',
                        nameTextStyle:{
                            color:'#00FFFF',
                            fontSize:'12',
                        },
                        "type": "category",
                        axisLabel: {
                            formatter: function(value) {
                                var ret = ""; //拼接加\n返回的类目项
                                var maxLength = 1; //每项显示文字个数
                                var valLength = value.length; //X轴类目项的文字个数
                                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                                if (rowN > 1) //如果类目项的文字大于3,
                                {
                                    for (var i = 0; i < rowN; i++) {
                                        var temp = ""; //每次截取的字符串
                                        var start = i * maxLength; //开始截取的位置
                                        var end = start + maxLength; //结束截取的位置
                                        //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                                        temp = value.substring(start, end) + "\n";
                                        ret += temp; //凭借最终的字符串
                                    }
                                    return ret;
                                } else {
                                    return value;
                                }
                            },
                            interval: 0,
                            fontSize: 12,
                            fontWeight: 100,
                            textStyle: {
                                color: '#00FFFF',

                            }
                        },
                        "data": [
                            {
                                "value": "飞行排班",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            },
                            {
                                "value": "飞机排班",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            },
                            {
                                "value": "乘务排班",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            },
                            {
                                "value": "落地",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            },
                            {
                                "value": "上轮档",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            },
                            {
                                "value": "关舱门",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            },
                            {
                                "value": "撤轮档",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            },
                            {
                                "value": "滑行",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            },
                            {
                                "value": "起飞",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            }
                        ],
                        "axisTick": {
                            "show": false
                        },
                        "axisLine": {
                            "gridIndex": 10,
                            "lineStyle": {
                                color: '#0177d4'
                            }
                        }
                    },
                    "yAxis": {
                        name :'(%)',
                        nameTextStyle:{
                            color:'#00FFFF',
                            fontSize:'12',
                        },
                        "gridIndex": 0,
                        "type": "value",
                        "axisLabel": {
                            "color": "#00FFFF",
                            "fontSize":'12',
                        },
                        "axisLine": {
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },

                    },
                    "series": [
                        {
                            "name": "准点",
                            "type": "bar",
                            "stack": "状况",
                            "barWidth": 10,
                            "data": [
                                90,
                                85,
                                80,
                                100,
                                90,
                                95,
                                100,85,90
                            ]
                        },
                        {
                            "name": "延误",
                            "type": "bar",
                            "stack": "状况",
                            "barWidth": 10,
                            "data": [
                                10,
                                15,
                                20,
                                0,
                                10,
                                5,
                                0,15,10
                            ]}]

                });
            },
            /******************************************本月保障排行****************************************/
            /*本月地服项目各环节准点率排行*/
            secProjectNodesrM: function () {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('secProjectNodesrM'))
                // 绘制图表
                myChart.setOption({
                    "tooltip": {
                        "trigger": "axis",
                        "axisPointer": {
                            "type": "line",
                            "lineStyle": {
                                "color": "#0177d4"
                            }
                        },
                        'formatter': '<div class="dot-border"> <div class ="dot"></div></div>  {a0}:{c0}% </br><div class="dot-border1"> <div class ="dot1"></div></div>  {a1}:{c1}% </br>'
                    },
                    "color": [
                        "#00c1fd",
                        "#fd8e0e"
                    ],
                    "legend": {
                        "align": "left",
                        "right": 16,
                        "top": 16,
                        "itemWidth": 10,
                        "itemHeight": 10,
                        "itemGap": 20,
                        "data": [
                            "延误",
                            "准点",
                        ],
                        textStyle:{
                            color:'#00FFFF'
                        }
                    },
                    "grid": {
                        "left": '5%',
                        "right": '15%',
                        "bottom": '3%',
                        "top": '15%',
                        "containLabel": true,

                    },
                    "xAxis": {
                        name:'保障名称',
                        nameTextStyle:{
                            color:'#00FFFF',
                            fontSize:'12',
                        },
                        "type": "category",
                        "data": [
                            {
                                "value": "装卸开始",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            },
                            {
                                "value": "下机开始",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            },
                            {
                                "value": "加油开始",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            },
                            {
                                "value": "下机结束",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            },
                            {
                                "value": "清洁开始",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            },
                            {
                                "value": "加油结束",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            },
                            {
                                "value": "开始登机",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            }
                            ,
                            {
                                "value": "值机关闭",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            },
                            {
                                "value": "清洁结束",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            },
                            {
                                "value": "舱单结束",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            },
                            {
                                "value": "登机结束",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            },
                            {
                                "value": "装卸结束",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            }
                        ],
                        axisLabel: {
                            formatter: function(value) {
                                var ret = ""; //拼接加\n返回的类目项
                                var maxLength = 1; //每项显示文字个数
                                var valLength = value.length; //X轴类目项的文字个数
                                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                                if (rowN > 1) //如果类目项的文字大于3,
                                {
                                    for (var i = 0; i < rowN; i++) {
                                        var temp = ""; //每次截取的字符串
                                        var start = i * maxLength; //开始截取的位置
                                        var end = start + maxLength; //结束截取的位置
                                        //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                                        temp = value.substring(start, end) + "\n";
                                        ret += temp; //凭借最终的字符串
                                    }
                                    return ret;
                                } else {
                                    return value;
                                }
                            },
                            interval: 0,
                            fontSize: 12,
                            fontWeight: 100,
                            textStyle: {
                                color: '#00FFFF',

                            }
                        },
                        "axisTick": {
                            "show": false
                        },
                        "axisLine": {
                            "gridIndex": 10,
                            "lineStyle": {
                                color: '#0177d4'
                            }
                        }
                    },
                    "yAxis": {
                        name :'(%)',
                        nameTextStyle:{
                            color:'#00FFFF',
                            fontSize:'12',
                        },
                        "gridIndex": 0,
                        "type": "value",
                        "axisLabel": {
                            "color": "#00FFFF",
                            "fontSize":'12',
                        },
                        "axisLine": {
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },

                    },
                    "series": [
                        {
                            "name": "准点",
                            "type": "bar",
                            "stack": "状况",
                            "barWidth": 10,
                            "data": [90, 85, 80, 100, 90, 95, 100,90,80,90,100,95
                            ]
                        },
                        {
                            "name": "延误",
                            "type": "bar",
                            "stack": "状况",
                            "barWidth": 10,
                            "data": [10, 15, 20, 0, 10, 5, 0,10,20,10,0,5
                            ]}]

                });
            },
            /*本月其他项目各环节准点率排行*/
            secProjectNodesrOM: function () {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('secProjectNodesrOM'))
                // 绘制图表
                myChart.setOption({
                    "tooltip": {
                        "trigger": "axis",
                        "axisPointer": {
                            "type": "line",
                            "lineStyle": {
                                "color": "#0177d4"
                            }
                        },
                        'formatter': '<div class="dot-border"> <div class ="dot"></div></div>  {a0}:{c0}% </br><div class="dot-border1"> <div class ="dot1"></div></div>  {a1}:{c1}% </br>'
                    },
                    "color": [
                        "#00c1fd",
                        "#fd8e0e"
                    ],
                    "legend": {
                        "align": "left",
                        "right": 16,
                        "top": 16,
                        "itemWidth": 10,
                        "itemHeight": 10,
                        "itemGap": 20,
                        "data": [
                            "延误",
                            "准点",
                        ],
                        textStyle:{
                            color:'#00FFFF'
                        }
                    },
                    "grid": {
                        "left": '5%',
                        "right": '15%',
                        "bottom": '3%',
                        "top": '15%',
                        "containLabel": true,

                    },
                    "xAxis": {
                        name:'保障名称',
                        nameTextStyle:{
                            color:'#00FFFF',
                            fontSize:'12',
                        },
                        "type": "category",
                        axisLabel: {
                            formatter: function(value) {
                                var ret = ""; //拼接加\n返回的类目项
                                var maxLength = 1; //每项显示文字个数
                                var valLength = value.length; //X轴类目项的文字个数
                                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                                if (rowN > 1) //如果类目项的文字大于3,
                                {
                                    for (var i = 0; i < rowN; i++) {
                                        var temp = ""; //每次截取的字符串
                                        var start = i * maxLength; //开始截取的位置
                                        var end = start + maxLength; //结束截取的位置
                                        //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                                        temp = value.substring(start, end) + "\n";
                                        ret += temp; //凭借最终的字符串
                                    }
                                    return ret;
                                } else {
                                    return value;
                                }
                            },
                            interval: 0,
                            fontSize: 12,
                            fontWeight: 100,
                            textStyle: {
                                color: '#00FFFF',

                            }
                        },
                        "data": [
                            {
                                "value": "飞行排班",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            },
                            {
                                "value": "飞机排班",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            },
                            {
                                "value": "乘务排班",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            },
                            {
                                "value": "落地",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            },
                            {
                                "value": "上轮档",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            },
                            {
                                "value": "关舱门",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            },
                            {
                                "value": "撤轮档",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            },
                            {
                                "value": "滑行",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            },
                            {
                                "value": "起飞",
                                "textStyle": {
                                    "color": "#00FFFF"
                                }
                            }
                        ],
                        "axisTick": {
                            "show": false
                        },
                        "axisLine": {
                            "gridIndex": 10,
                            "lineStyle": {
                                color: '#0177d4'
                            }
                        }
                    },
                    "yAxis": {
                        name :'(%)',
                        nameTextStyle:{
                            color:'#00FFFF',
                            fontSize:'12',
                        },
                        "gridIndex": 0,
                        "type": "value",
                        "axisLabel": {
                            "color": "#00FFFF",
                            "fontSize":'12',
                        },
                        "axisLine": {
                            lineStyle: {
                                color: '#0177d4'
                            }
                        },

                    },
                    "series": [
                        {
                            "name": "准点",
                            "type": "bar",
                            "stack": "状况",
                            "barWidth": 10,
                            "data": [
                                90,
                                85,
                                80,
                                100,
                                90,
                                95,
                                100,85,90
                            ]
                        },
                        {
                            "name": "延误",
                            "type": "bar",
                            "stack": "状况",
                            "barWidth": 10,
                            "data": [
                                10,
                                15,
                                20,
                                0,
                                10,
                                5,
                                0,15,10
                            ]}]

                });
            },
            /*本月保障准点率统计*/
            sroOnTime: function () {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('sroOnTime'))
                // 绘制图表
                myChart.setOption({
                    title: {
                        text: '本月保障准点率统计',
                        x:'left',
                        textStyle:{
                            color:'#00FFFF',
                            fontSize:'14',
                        }
                    },
                    tooltip: {
                        show: true,
                        trigger: 'axis',

                        formatter: '<div class="dot-border"> <div class ="dot"></div></div>  {b0}:{c0}% '
                    },
                    xAxis: {
                        name:'日期',
                        type: 'category',
                        data: ['1号', '2号', '3号', '4号', '5号', '6号', '7号', '8号', '9号', '10号', '11号', '12号', '13号',
                            '14号', '15号', '16号', '17号', '18号', '19号', '20号', '21号', '22号', '23号', '24号', '25号', '26号',
                            '27号', '28号', '29号', '30号', '31号'],
                        boundaryGap: true,
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#6995aa'
                            },
                            onZero: true
                        },
                        axisLabel: {
                            fontSize: 11,
                            color: '#A5CADB'
                        },
                        splitLine: {
                            show: true,
                            lineStyle: {
                                type: 'dotted',
                                color: '#1978D9'
                            }
                        },
                    },
                    yAxis: {
                        name:'(%)',
                        type: 'value',
                        axisTick: {
                            show: false
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#6995aa'
                            },
                            onZero: false
                        },
                        axisLabel: {
                            fontSize: 11,
                            color: '#A5CADB'
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'dotted',
                                color: '#1978D9'
                            }
                        },

                    },
                    grid: {
                        left: '2%',
                        right: '6%',
                        top: '15%',
                        bottom: '1%',
                        containLabel: true
                    },
                    series: [{
                        data: [96, 95, 90, 87, 93, 99, 80, 86, 87, 100, 100, 82, 83,
                            94, 86, 89, 80, 100, 82, 87, 100, 91, 87, 70, 97, 80,
                            83, 75, 80, 100, 75],
                        type: 'line',
                        smooth: true,
                        symbolSize: 5,
                        symbol: 'circle',
                        itemStyle: {
                            normal: {
                                label: {
                                    formatter: function(params) {
                                        return dataValue - params.value;
                                    },
                                    fontSize: 40,
                                    padding: [90, 0, 0, 0],
                                    color: '#fff',
                                    textStyle: {
                                        baseline: 'top'
                                    }
                                },
                                color: '#01f2ee',
                                borderColor: 'rgba(1, 242, 238, 0.5)',
                                borderWidth: 10
                            }
                        }
                    }]
                });
            },

        },
        mounted:function(){
            this.$nextTick(function () {
                this.secProjectNodesr();
                this.secProjectNodesrO();
            }.bind(this));

        },
        watch:{
        },
        computed:{

        },
        activated:function () {
            messages.$emit('change','保障排行分析');
        }
    })
    module.exports=VueComponent;
    module.exports.reDefine=function (val) {
        module.exports.type=val;
        return module.exports;
    }

})



